<template>
  <transition name="vbest-alter-fade">
    <div
      class="vbestui-alert"
      :class="[`vbestui-alert-border-${type}`,
      {'vbestui-alert-hasicon-padding':!isIcon}]"
      v-if="isShow"
    >
      <div class="vbestui-alert-icon" v-if="isIcon">
        <slot name="icon">
          <i
            class="vbestui-alert-icon-size"
            :class="[`vbestui-iconfont icon-${type}-m `,
        `vbestui-icon-${type}`,
        {'vbestui-alert-icon-only-title':isOnlyOne}]"
          ></i>
        </slot>
      </div>
      <div class="vbestui-alert-close" @click="alertClose" v-if="closable">
        <b-button
          class="vbestui-iconfont icon-x vbestui-alert-icon-color"
          transparent
          width="20px"
          height="20px"
        />
      </div>

      <div class="vbestui-alert-container">
        <div class="vbestui-alert-artical-title">
          <slot name="title"></slot>
        </div>
        <div class="vbestui-alert-artical-desc" v-if="$slots.default">
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { oneOf } from "utils/index.js";
export default {
  name: "BAlert",
  props: {
    icon: {
      type: Boolean,
      default: false,
    },
    type: {
      validator(value) {
        return oneOf(value, ["default", "info", "success", "warning", "error"]);
      },
      default: "default",
    },
    closable: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isOnlyOne() {
      return (
        (this.$slots.title && !this.$slots.default) ||
        (this.$slots.default && !this.$slots.title)
      );
    },
    isIcon() {
      return (this.icon && this.type != "default") || this.$slots.icon;
    },
  },
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    alertClose() {
      this.isShow = false;
      this.$emit("close");
    },
  },
};
</script>